<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="排列三一号表" name="first">
        <table class="table" border="1">
          <tr>
            <td class="title">定位</td>
            <td class="content">
              <div class="content_title">
                <span>1.请选择投注号码(如果使用大底,该项不可选)</span>
              </div>
              <el-form ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="百位:">
                  <el-checkbox-group v-model="selectHunderdList">
                    <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                    <el-button size="small" @click="canhundred">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="十位:">
                  <el-checkbox-group v-model="selectTenList">
                    <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                    <el-button size="small" @click="canTen">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="个位:">
                  <el-checkbox-group v-model="selectBitList">
                    <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                    <el-button size="small" @click="canBit">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr>
            <td class="title">奇偶过滤</td>
            <td class="content">
              <div class="content_title">
                <span>2.奇偶过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="20px" class="form">
                <el-form-item>
                  <span>包含选中</span>
                  <el-button class="allBtn" size="small" @click="allJo">全选</el-button>
                  <el-button size="small" @click="canJo">取消</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="j.title" v-for="j in jList" :key="jList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="o.title" v-for="o in oList" :key="oList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
        </table>
        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="starBtnClick">开始分析</el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="排列三二号表" name="second">

        <table class="table" border="1">
          <tr>
            <td class="title">定位</td>
            <td class="content">
              <div class="content_title">
                <span>1.请选择投注号码(如果使用大底,该项不可选)</span>
              </div>
              <el-form ref="form" :model="form" label-width="60px" class="form">
                <el-form-item label="百位:">
                  <el-checkbox-group v-model="selectHunderdList">
                    <el-checkbox :label="hundred" v-for="hundred in hundredList" :key="hundred" ></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allhundred">全选</el-button>
                    <el-button size="small" @click="canhundred">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="十位:">
                  <el-checkbox-group v-model="selectTenList">
                    <el-checkbox :label="ten" v-for="ten in tenList" :key="ten"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allTen">全选</el-button>
                    <el-button size="small" @click="canTen">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="个位:">
                  <el-checkbox-group v-model="selectBitList">
                    <el-checkbox :label="bit" v-for="bit in bitList" :key="bit"></el-checkbox>
                    <el-button class="allBtn" size="small" @click="allBit">全选</el-button>
                    <el-button size="small" @click="canBit">取消</el-button>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr>
            <td class="title">奇偶过滤</td>
            <td class="content">
              <div class="content_title">
                <span>2.奇偶过滤</span>
              </div>
              <el-form ref="form" :model="form" label-width="20px" class="form">
                <el-form-item>
                  <span>包含选中</span>
                  <el-button class="allBtn" size="small" @click="allJo">全选</el-button>
                  <el-button size="small" @click="canJo">取消</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="j.title" v-for="j in jList" :key="jList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
               <el-form-item>
                  <el-checkbox-group v-model="selectJoList">
                    <el-checkbox :label="o.title" v-for="o in oList" :key="oList.id"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </td>
          </tr>
        </table>
        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="starBtnClick">开始分析</el-button>
        </div>

      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  export default {
    name: 'RankThreeOne',
    data() {
      return {
        activeName: 'first',
        checkAll: false,
        bitList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 个位
        tenList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 十位
        hundredList: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'], // 百位
        jList: [{
            id: "111",
            title: "奇奇奇"
          },
          {
            id: "110",
            title: "奇奇偶"
          },
          {
            id: "101",
            title: "奇偶奇"
          },
          {
            id: "011",
            title: "偶奇奇"
          }
        ], // 奇
        oList: [{
            id: "000",
            title: "偶偶偶"
          },
          {
            id: "001",
            title: "偶偶奇"
          },
          {
            id: "010",
            title: "偶奇偶"
          },
          {
            id: "100",
            title: "奇偶偶"
          }
        ], // 奇
        selectHunderdList: [],
        selectTenList: [],
        selectBitList: [],
        selectJoList: [],
        selectJoIdList: [],

        form: {
          type: [],
        }
      };
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
      },

      // 百位全选
      allhundred(val) {
        this.selectHunderdList = val ? this.hundredList : [];
      },
      // 百位取消
      canhundred(val) {
        this.selectHunderdList = [];
      },
      // 十位全选
      allTen(val) {
        this.selectTenList = val ? this.tenList : [];
      },
      // 十位取消
      canTen(val) {
        this.selectTenList = [];
      },
      // 个位全选
      allBit(val) {
        this.selectBitList = val ? this.bitList : [];
      },
      // 个位取消
      canBit(val) {
        this.selectBitList = [];
      },

      // 奇偶全选
      allJo(val) {
        this.selectJoIdList = [];
        this.selectJoList = [];
        var len = this.jList.length;
         for(var i=0;i<this.jList.length;i++){
           let item = this.jList[i];
           this.selectJoIdList.push(item.id);
           this.selectJoList.push(item.title);
         }
         var len = this.oList.length;
          for(var i=0;i<this.oList.length;i++){
            let item = this.oList[i];
            this.selectJoIdList.push(item.id);
            this.selectJoList.push(item.title);
          }
         console.log(this.selectJoIdList);
      },
      // 奇偶取消
      canJo(val) {
        this.selectJoList = [];
        this.selectJoIdList = [];

      },
      
      // 奇偶多选
      seleceJo(){
        this.selectJoIdList = [];
        if (this.selectJoList.length > 0) {
          for (let i = 0; i < this.selectJoList.length; i++) {
            let title = this.selectJoList[i];
            for(let j=0;j<this.jList.length;j++){
              let item = this.jList[j];
              if (title == item.title) {
                this.selectJoIdList.push(item.id);
              }
            }
            for(let o=0;o<this.oList.length;o++){
              let item = this.oList[o];
              if (title == item.title) {
                this.selectJoIdList.push(item.id);
              }
            }
          }
        }
        console.log(this.selectJoIdList);
      },

      // 开始分析
      async starBtnClick() {
        this.seleceJo();

        try {
         const res = await this.$http.post("/api/calc/dwjo",{
            bit:JSON.stringify(this.selectBitList),
            ten:JSON.stringify(this.selectTenList),
            hundred:JSON.stringify(this.selectHunderdList),
            jo:JSON.stringify(this.selectJoIdList)
         })
         if(res.data.code == 200) {
            // 一号表
            if (this.activeName == 'first') {
              window.localStorage.setItem("dwjoList",JSON.stringify(res.data.data));
              this.$router.push({path:"/home/rankThreeAnalysis",query:{activeName:this.activeName,type: 0}});
            }else { // 二号表
              window.localStorage.setItem("dwjoList2",JSON.stringify(res.data.data));
              this.$router.push({path:"/home/rankThreeAnalysis",query:{activeName:this.activeName,type: 0}});
            }

         }else {
           this.$message.error("请求失败");
         }
        } catch (error) {

        }
      }
    }

  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }

  .table {
    width: 100%;
    height: 400px;
    border-color: #2676C2;
    border-collapse: collapse;
  }

  .title {
    width: 140px;
    color: #2676C2;
    text-align: center;
  }

  .content {
    height: 200px;
    margin: 0px;
    padding: 0px;
  }

  .content_title {
    margin: 0px;
    padding: 0px;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .allBtn {
    margin-left: 20px;
  }

</style>
